<template>
  <div id="page">
    <ChinaView />
    <JiangxiView />
    <JiangxiView2 />
    <JiangxiView3 />
    <JiangxiView4 />
    <JiangxiView5 />
    <JiangxiView6 />
  </div>
</template>

<script setup lang="ts">
import ChinaView from "@/components/ChinaMap.vue";
import JiangxiView from "@/components/JiangxiMap.vue";
import JiangxiView2 from "@/components/JiangxiMap2.vue";
import JiangxiView3 from "@/components/JiangxiMap3.vue";
import JiangxiView4 from "@/components/JiangxiMap4.vue";
import JiangxiView5 from "@/components/JiangxiMap5.vue";
import JiangxiView6 from "@/components/JiangxiMap6.vue";
import { onMounted, onBeforeUnmount } from "vue";

onMounted(() => {
  window.addEventListener("scroll", scrolling);
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", scrolling);
});

const scrolling = () => {
  const scrollTop = window.scrollY;
  const windowHeight = document.documentElement.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight;
  console.log("滚动距离 ", scrollTop);
  if (scrollTop + windowHeight == scrollHeight) {
    console.log("你已经到底部了");
  }
};
</script>

<style scoped></style>
